<template>
    <div class="login">
      <div>
        <van-nav-bar title="登录" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
    <div class="title">
        <img class="logo" src="../assets/logo.jpg">
    </div>
    <div>
        <van-form @submit="onSubmit" label-align="right">
            <van-cell-group inset>
                <van-field v-model="state.username" name="username" placeholder="请输入用户名" label="用户名："
                    :rules="[{ required: true, message: '用户名不能为空！' }]" />
                <van-field v-model="state.userpass" name="userpass" placeholder="请输入密码" type="password" label="密码："
                    :rules="[{ required: true, message: '密码不能为空！' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    登录
                </van-button>
            </div>
        </van-form>
        <div style="margin: 16px;">
            <van-button round block type="danger" @click="goto">注册</van-button>
        </div>
        
    </div>  
    </div>
    
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import { LoginApi } from '@/api';
import { useCounterStore } from '@/stores/counter';
import { showSuccessToast, showFailToast } from 'vant';
const router = useRouter();
const userInfo = useCounterStore();
const state = ref({
    username: '',
    userpass: ''
});
const UserLogin = async e => {
    const res = await LoginApi(e);
    if(res.userid === '0') {
        showFailToast('登录失败！');
    }
    else {
        showSuccessToast('登录成功！');
        userInfo.userId = res.userid;
        userInfo.userName = state.value.username;
        userInfo.userpass = state.value.userpass;
        router.push('/');
    }
};
const onSubmit = e => {
    UserLogin(e);
};
const goto = () => {
    router.push('/register');
};
const onClickLeft=()=> {
    router.push('/')
  };
  
</script>

<style scoped>
.login{
    width: 100%;

}
.title{
    width: 80%;
    font-size: 32px;
    margin: 50px auto;
    text-align: center;
}
.van-field {
  border: 1px solid #eee;
  margin: 5px 0;
  border-radius: 20px;
}.logo{
    width: 100%;
}
</style>